import React, { Component } from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as ListAction from '../../store/actions/list';
import {ListProp} from '../../types/list.d';
import {RouteComponentProps} from 'react-router-dom';
import FoodItem from '../../components/foodItem';
import './index.css';

interface Iprops extends RouteComponentProps{
    list:ListProp[],
    getList:(id:number) => void,
    match:any
}

interface Istate{
    active:string
}

class List extends Component<Iprops,Istate> {
    state = {
        active:'最新推荐'
    }

    componentDidMount(){
        let id = this.props.match.params.id;
        this.props.getList(id);
    }

    render() {
        console.log(this.props.list)
        let tabs = ['最新推荐','热门精选'];
        let curShow = this.props.list.filter(item => item.type === this.state.active);
        let {active} = this.state;
        return (
            <div>
                <div className="tab">
                    {tabs.map(item => <span className={item === active?'active':''} key={item} onClick={() => {this.setState({active:item})}}>{item}</span>)}
                </div>
                <div>
                    {curShow.map(item => <FoodItem  key={item.id} item={item}></FoodItem>)}
                </div>
            </div>
        )
    }
}

let stateMapToProps = (state:any) => {
    return {
        list:state.list
    }
}

let dispatchMapToProps = (dispatch:any) => {
    return bindActionCreators(ListAction,dispatch)
}

export default connect(stateMapToProps,dispatchMapToProps)(List)
